<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="utf-8">
    <title>悬停代码小瀑布按钮</title>
    <style>
        .app {
            width: 100%;
            height: 100vh;
            background-color: #ffffff;
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .btn-box80 {
            width: 124px;
            height: 46px;
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            --color-f: #43ff85;
            --color-s: #6c72fe;
            --color-t: #f7e543;
        }

        .btn80 {
            width: 124px;
            height: 46px;
            font-size: 20px;
            font-weight: bold;
            letter-spacing: 4px;
            outline: none;
            background-color: transparent;
            border: 2px solid var(--color-f);
            color: var(--color-f);
            position: absolute;
            padding: 0;
            cursor: pointer;
            z-index: 1;
            transition: all 0.24s linear;
        }

        .loading80 {
            width: 124px;
            height: 46px;
            font-size: 24px;
            font-weight: bold;
            letter-spacing: 4px;
            background-color: transparent;
            position: absolute;
            left: -2px;
            overflow: hidden;
            cursor: pointer;
            z-index: 0;
            opacity: 0;
            transition: opacity 0.24s linear;
        }

        .p80 {
            cursor: pointer;
            writing-mode: vertical-rl;
            letter-spacing: 3px;
            font-size: 12px;
            line-height: 1;
            margin: 0;
            padding: 0;
            position: absolute;
            color: var(--color-f);
            --left: 3px;
            --delay: 0.1s;
            animation: eff80 0.6s linear infinite;
        }

        .i80 {
            color: var(--color-s);
        }

        .i80-1 {
            color: var(--color-t);
        }

        .p80:nth-child(1) {
            left: var(--left);
        }

        .p80:nth-child(2) {
            left: calc(var(--left)+18px);
            animation-delay: var(--delay);
        }

        .p80:nth-child(3) {
            left: calc(var(--left)+18px*2);
            animation-delay: calc(var(--delay)*2);
        }

        .p80:nth-child(4) {
            left: calc(var(--left)+18px*3);
        }

        .p80:nth-child(5) {
            left: calc(var(--left)+18px*4);
            animation-delay: calc(var(--delay)*4);
        }

        .p80:nth-child(6) {
            left: calc(var(--left)+18px*5);
            animation-delay: calc(var(--delay)*3);
        }

        .p80:nth-child(7) {
            left: calc(var(--left)+18px*6);
        }

        @keyframes eff80 {
            0% {
                transform: translateY(-40%);
            }

            100% {
                transform: translateY(140%);
            }
        }

        .btn-box80:hover.btn80 {
            text-shadow: 0 2px 0 var(--color-s);
            box-shadow: 2px 2px 0 var(--color-s), -2px -2px 0 var(--color-t);
        }

        .btn-box80:hover.loading80 {
            opacity: 1;
            background-color: #000000;
        }
    </style>
</head>

<body>
    <div class="app">
        <div class="btn-box80">
            <button class="btn80">HOVER</button>
            <div class="loading80">
                <p class="p80">4rs<span class="i80-1">b</span>h<span class="i80">k</span>r</p>
                <p class="p80">_7u<span class="i80">i</span>90<span class="i80">@</span>v</p>
                <p class="p80">_7,=<span class="i80-1">j</span>ud<span class="i80">i</span>y</p>
                <p class="p80">d8<span class="i80-1">%</span>rg</p>
                <p class="p80"><span class="i80">d</span>oopd<span class="i80-1">e</span>g</p>
                <p class="p80">c4*<span class="i80-1">h</span>ld</p>
                <p class="p80">u<span class="i80">g</span>_^43<span class="i80">2</span>iu</p>
            </div>
        </div>
    </div>
</body>

</html>